import './index.less';
import GameControl from './modules/GameControl';
import {Chess} from './modules/Constants';


const game = new GameControl(30, 15, document.getElementById("main")!);

/** 功能区（子元素是各种按钮） */
const actions = document.getElementById("actions")?.getElementsByTagName("button")!;

/** 重置游戏按钮 */
const resetBtn = actions.item(0)!;
/** 悔棋按钮 */
const repentanceBtn = actions.item(1)!;
/** 确认落子按钮 */
const confirmBtn = actions.item(2)!;
/** 设置面板 */
const settings = document.getElementById("settings")!;
/** 用户是否选择了自动确认落子 */
let autoConfirm = false;

// 重新开始游戏
resetBtn.onclick = (event)=>{
    game.reSet();
};

repentanceBtn.style.display = 'none';
// 悔棋按钮
repentanceBtn.onclick = (event)=>{
    game.gameRepentance(2);
    repentanceBtn.style.display = 'none';
};
// 确认落子按钮
confirmBtn.style.display = 'none';
confirmBtn.onclick = (event)=>{
    confirmBtn.style.display = 'none';
    repentanceBtn.style.display = 'inline-block';
    game.userComfirm();
};
// 如果是自动确认落子，用户落子后显示悔棋按钮；否则隐藏悔棋按钮并显示确认落子按钮（悔棋只在自动确认落子的情况下使用）
game.addUserChessListenner(()=>{
    if(autoConfirm) {
        repentanceBtn.style.display = 'inline-block';
    } else {
        repentanceBtn.style.display = 'none';
        confirmBtn.style.display = 'inline-block';
    }
});
// 游戏结束后，不允许点击悔棋按钮和确认落子按钮
game.addGameOverListenner(()=>{
    repentanceBtn.style.display = 'none';
    confirmBtn.style.display = 'none';
    // settings.style.display = "block";
});
// 开局获取游戏设置参数
settings.getElementsByTagName("button").item(0)!.onclick=(event)=>{
    const chessType = (settings.querySelector("input[name=userChessType]:checked") as HTMLInputElement).value as Chess;
    const userFirst = (settings.querySelector("input[name=earlyLate]:checked") as HTMLInputElement).value==="early";
    autoConfirm = (document.getElementById("disabledAutoConfirm") as HTMLInputElement).checked;
    const doubleFour = (document.getElementById("doubleFour") as HTMLInputElement).checked;
    const doubleThree = (document.getElementById("doubleThree") as HTMLInputElement).checked;
    const moreThanFive = (document.getElementById("moreThanFive") as HTMLInputElement).checked;

    game.gameStart(chessType, userFirst, autoConfirm, { doubleFour, doubleThree, moreThanFive});
    settings.style.display = "none";
};

document.querySelectorAll(".help").forEach((help)=>{
    const hp = help as HTMLElement;
    hp.onclick = (event)=>{
        const source = event.target as HTMLElement;
        const tooltip = source.getElementsByClassName("tooltip").item(0) as HTMLElement;
        tooltip.style.display = "inline-block";
        tooltip.style.left = (event.offsetX - tooltip.clientWidth/2 + 60) + "px";
        tooltip.style.top = (event.y + source.offsetHeight) + "px";
        tooltip.focus();
    };
});
document.querySelectorAll(".help > .tooltip").forEach((tooltip)=>{
    const tp = tooltip as HTMLElement;
    tp.onmouseleave = (e)=>{
        tp.style.display = "none";
    }
    tp.onclick = (e)=>{
        e.stopPropagation();
    }
    tp.onblur = (e)=>{
        tp.style.display = "none";
    }
});
